<template>
  <a-select
    show-search
    :allow-clear='true'
    option-filter-prop="children"
    :placeholder="$t('pleaseSelect')"
    :allow-clean="clear"
    :disabled="disabled"
    :getPopupContainer="getPopupContainer"
    v-model="selectedValue"
  >
    <a-select-option v-for="item in options" :title="$t(item.name)" :key="item.id" :value="Number(item.value)">
      {{ $t(item.name) }}
    </a-select-option>
  </a-select>
</template>
<script>
import { mapState } from 'vuex'
export default {
  props: {
    defaultValue: {
      type: [Number, Object, String],
      default () {
        return undefined
      }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    clear: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    ...mapState({
      options: (state) => state.vehicleVersion.rollbackOptions
    })
  },
  data () {
    return {
      selectedValue: undefined
    }
  },
  watch: {
    defaultValue: {
      handler (val) {
        if (val !== this.selectedValue) {
          this.selectedValue = this.defaultValue
        }
      },
      immediate: true
    },
    selectedValue (val) {
      this.$emit('changeoption', val)
    }
  },
  created () {
  },
  methods: {
    getPopupContainer () {
      return document.body
    }
  }
}
</script>
